<!--  -->
<template>
  <div class="emalist">
    <h1>资产信息</h1>
        <el-button class="btn-btn button-but" size="medium" type="primary" @click="dialogVisible = true">新增资产</el-button>

    <el-dialog title="新增资产" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="资产编号">
          <el-input class="ipt-ipt" placeholder="请输入资产编号"  v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item class="ipt-ipt" label="资产名称">
          <el-input placeholder="请输入资产名称"  v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item class="ipt-ipt" label="资产类型">
          <el-input placeholder="请输入资产类型"  v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item class="ipt-ipt" label="资产所属部门">
          <el-input placeholder="请输入资产所属部门"  v-model="form.section"></el-input>
        </el-form-item>
        <el-form-item label="资产状态">
          <el-input class="ipt-ipt" placeholder="请输入资产状态"  v-model="form.state"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button  class="btn-btn" @click="onNoneDailg">取 消</el-button>
        <el-button  class="btn-btn" type="primary" @click="addClick">确 定</el-button>
      </span>
    </el-dialog>
    <!-- ------------------------------------------------------ -->
    <div class="emalist-table">
      <el-table
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center',padding:'10px'}"
        :data="
          tableData.filter(
            (data) =>
              !search || data.number.toLowerCase().includes(search.toLowerCase())
          )
        "
        height="350"
        border
        style="width: 100%" 
      >
        <el-table-column prop="number" label="资产编号" width="200" >
                <template slot-scope="scope">
                    <el-input  placeholder="请输入内容"  v-show="scope.row.show" v-model="scope.row.number">
                    </el-input>
                    <span v-show="!scope.row.show">{{scope.row.number}}</span>
                </template>
        </el-table-column>
        <el-table-column prop="name" label="资产名称" width="200">
                      <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.name"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.name}}</span>
                </template>
        </el-table-column>
        <el-table-column prop="type" label="资产类型" width="200" >
                          <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.type"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.type}}</span>
                </template>
        </el-table-column>
        <el-table-column prop="section" label="资产所属部门" width="200">
                          <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.section"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.section}}</span>
                </template>
        </el-table-column>
        <el-table-column prop="state" label="资产状态" width="200">
                          <template slot-scope="scope">
                    <el-input ref="myInput" placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.state"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.state}}</span>
                </template>

        </el-table-column>
        <el-table-column label="操作">
          <template slot="header" slot-scope="scope">
            <span>操作</span>
            <el-input
              :key="scope.$index"
              class="input"
              v-model.lazy="search"
              size="mini"
              placeholder="输入资产编号搜索"
            />
          </template>
          <template slot-scope="scope">
             <el-button type="primary" size="medium" @click="scope.row.show =true" class="btn-btn">编辑</el-button>
             <el-button type="info" size="medium" @click="scope.row.show =false" class="btn-btn">保存</el-button>
            <el-button
              size="medium"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              class="btn-btn"
              >删除</el-button
            >
            <el-button
              size="medium"
              type="success"
              @click="handleAdd(scope.$index, scope.row)"
              class="btn-btn"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      search: "",
      tableData: [],
       dialogVisible:false,
        form: {
          number: "",
          name: "",
          type: "",
          section: "",
          state: "",        
          }
    };
    
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    addClick:function(){
      if(this.form.number!=''&&this.form.name!=''&&this.form.type!=''&&this.form.section!=''&&this.form.state){
        this.tableData.push( Object.assign({},this.form))
        // this.tableData.push(this.form)
        console.log(this.form)
        this.dialogVisible=false
        this.form={}

      }else{
        alert('请将信息补充完整')
      }
    },
        //取消导航栏
    onNoneDailg:function(){
         this.dialogVisible=false
          this.form={}
    },

    // handleEdit(index, row) {
    //   console.log(index, row);
    // },
    handleDelete(index) {
      console.log(index);
      
      this.$confirm('此操作将永久删除, 是否继续?', '提示', { 
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.tableData.splice(index, 1);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    handleAdd(index,row) {
    // this.tableData.push(row);
    this.tableData.push(Object.assign({},row));
    this.tableData[index].number +=1; 
    // this.tableData[index].number +=19; 
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.$http.get("/getPropertyinfo").then(res=>{
      console.log(res.data);
        this.tableData = res.data;
        console.log(this.tableData)
    })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
*{
  margin: 0;
  padding: 0;
}
.emalist{
  width: 100%;
  position: relative;
}
.button-but{
  position: absolute;
  top: 105px;
  left: 0;
}
.emalist-table {
  margin-top: 100px;
  text-align: right;
  width: 83%;
  height: 350px;
  
}
.input {
  width: 230px;
  margin-left: 10px;
}
.btn-btn{
  padding: 10px 11px !important;
}
.ipt-ipt{
   padding: 5px 0 0 0 !important;
}
</style>